<template>
	<view>
		<view class="express_rich">
			<view v-for="(item,index) in wuliuListData" :key="index"
				style="margin-bottom: 40rpx;border: 2rpx solid #be9364;padding: 10rpx;border-radius: 20rpx;">
				<view class="item" style="margin: 0">
					物流公司：
					<text style="font-weight: 700; margin-left: 10rpx">{{ item.expressName }}</text>
					<text class="copy1" @click="chakanGuiji(item.codeNo)">查看物流轨迹</text>
				</view>
				<view class="item">
					物流单号：
					<text style="font-weight: 700; margin-left: 10rpx">{{ item.codeNo }}</text>
					<text class="copy" @click="copy(item.codeNo)">复制</text>
				</view>
			</view>

		</view>
		<!-- 收货地址 -->
		<view class="content_rich">
			<view>
				<view class="flex list" v-if="wuliuGuijiData.length>0">
					<view class="time"></view>
					<view class="info">
						<view class="title">[收货地址]</view>
					</view>
				</view>
				<view class="flex list" v-for="(item, index) in wuliuGuijiData" :key="index">
					<view :class="{ one: index === 0, info: true }">
						<view class="title address" :style="{ color: index !== 0 ? '#999' : '#333' }">{{ item.context }}
							<view class="time">{{ item.time }}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getUserId
	} from '@/utils/index.js';
	export default {
		data() {
			return {
				wuliuListData: [],
				wuliuGuijiData: [],




				//下面是没用的垃圾混淆代码
				renzhengTimeSta1111111: true, //初次请求认证时间默认是带有的，
				zhuceTimeSta11111: false, //初次请求注册时间默认是没有的
				renzhengTimeList11111: [],
				zhuceTimeStaList1111: null,
				detailOrderIdStr11111: '',
				threeTabCurrent1111: 0,
				applyGOodsList11111: [], //供货商列表
				allCardEnterSta1111: false, //默认是false，点击批量卡券入库的时候变为true
				codeAddNumsList11111: [],
				numsList11111: [],
				dataSourceBqcp1111: [],
				selectedRowKeys1111: [],
				selectedRowKeysB11111: [],
				rkVisible11111: false,
				rkjlVisible1111: false,
				lhjlVisible1111: false,
				currentStyleData22222: {},
				dataSourceStyle2222: [],
				showStyleData2222: false,
				indexTemplate2222: [],
				SVGCircleElement3ee: '',
				vshoweqwsc1111: false,
				showStyleDataInfo2222: false,
				opeCategoryList2222: [],
				leimuVisible2222: false,
				selectedRowKeys02222: [],
				selectionRows02222: [],
				selectedRowKeys133333: [],
				selectionRows13333: [],
				selectedRowKeys2333: [],
				selectionRows23333: [],
				selectedRowKeys33333: [],
				selectionRows33333: [],
				selectedRowKeys4333: [],
				selectionRows43333: [],
				curwfqwrentStyleDaterwaInfo444: {},
				currwerentStywerleDatweraInfo1444: {},
				currewerntStyleDataInfo24444: {},
				currentweStyleDytuataIwenfo34444: {},
				currenwetStdfgyleDataInfo44444: {},
				checkZfbPhone_h5444: '',
				plNafgdvfdtjyme4444: '', //四大品类的名字
				uniPdfgrtylatform444: '', //运行环境mp-alipay mp-weixin
				refgjtytrsemark555: '', //备注
				timefgjSelStr5555: '', //选择的上门时间（2023-08-31 00:00:00）
				amOdcuiofasrpm5555: '', //选择的上门时间是上午还是下午
				pageShnjlkgohowTime5555: '', //页面上用户看到的显示的时间
				paraghsdfmsw454: {},
				valhgujtueNum56756: 0,
				addrdraess56756: {}, //上门收货地址
				adawerterydressId575: 0,
				sceoyuitne57567: '',
				tntuiopId56757: '',
				weictyuratCustomer5756: '',
				yuidurtyuoy567567: false,
			}
		},

		onLoad(e) {
			if (this.$checkIsPageLessParameter(e, ["orderId"])) return // 如果URL传参没有订单ID，那么做出提示
			this.orderId = e?.orderId
			this.fetchWuliuDetail_rich()
		},

		computed: {},

		methods: {
			//复制
			copy(oId) {
				if (!oId) return
				uni.setClipboardData({
					data: oId,
					success: function() {
						uni.showToast({
							title: "复制成功",
							icon: "none"
						})
					},
				})
			},

			/**
			 * 加载物流信息数据
			 */
			fetchWuliuDetail_rich() {
				let useId = getUserId()
				this.$request(`order/mall/api/order/userExpressListByOrderId?orderId=${this.orderId}&uid=${useId}`, {},
					"GET", false,
					true).then(res => {
					if (res.businessSuccess || res.success) {
						this.wuliuListData = res?.data || []
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						});
					}
				})
			},
			//查看轨迹
			chakanGuiji(codeNo) {
				let useId = getUserId()
				this.wuliuGuijiData = []
				this.$request(
					`order/mall/api/order/userGetExpressByOrderId?orderId=${this.orderId}&expressNo=${codeNo}&uid=${useId}`, {},
					"GET", false,
					true).then(res => {
					if (res.success || res.businessSuccess) {
						this.wuliuGuijiData = res.data.list || []
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						});
					}
				})
			},
		},
	}
</script>

<style lang="scss" scoped>
	.flex {
		display: flex;
		flex-direction: row;
	}

	.express_rich {
		background-color: #fff;
		margin-top: 20rpx;
		border-radius: 20rpx;
		padding: 30rpx;

		.item {
			color: #333333;
			margin-top: 20rpx;
			font-size: 24rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
		}

		.copy {
			margin-left: 20rpx;
			padding: 1px 5px;
			letter-spacing: 0.05em;
			font-weight: 400;
			color: #333333;
			display: inline-block;
			border-radius: 14rpx;
			font-size: 24rpx;
			border: 1rpx solid #333333;
			text-align: center;

		}

		.copy1 {
			font-size: 24rpx;
			font-weight: 400;
			border-radius: 14rpx;
			@include global-background-color-red();
			letter-spacing: 0.05em;
			margin-left: 20rpx;
			padding: 1px 5px;
			color: #ffffff;
			display: inline-block;
			text-align: center;

		}
	}

	//收货地址
	.content_rich {
		padding: 20rpx 40rpx 0;
		margin-top: 20rpx;
		border-radius: 20rpx;
		background-color: #fff;

		.list {
			&:first-child {
				.info::before {
					bottom: -20rpx;
					border-left: 1px solid #e5e5e5;
					margin-top: 40rpx;
				}

				.title {
					font-size: 24rpx;
					line-height: 40rpx;
					font-weight: 400;
					color: #666666;

					&::before {
						width: 42rpx;
						height: 42rpx;
						left: -21rpx;
						background: url("../../static/RICHcomplain/RICHback.png") no-repeat center;
						background-size: 42rpx 42rpx;
					}
				}
			}

			&:last-child {
				.info::before {
					height: 10rpx;
				}
			}
		}

		.info {
			position: relative;
			color: #999;

			&::before {
				content: "";
				position: absolute;
				left: 0;
				top: 0;
				bottom: 0;
				z-index: 1;
				width: 0;
				border-left: 1px solid #e5e5e5;
			}

			&.one {
				.title {
					&::before {
						content: "";
						position: absolute;
						left: -2px;
						top: 0;
						bottom: 0;
						z-index: 1;
						width: 5px;
						height: 5px;
						border-radius: 50%;
						@include global-background-color();
					}
				}

				&.address {
					color: #333333;
				}
			}

			.title {
				position: relative;
				margin-bottom: 54rpx;
				padding-left: 32rpx;
				font-size: 24rpx;
				font-weight: 400;
				line-height: 33rpx;

				&::before {
					content: "";
					position: absolute;
					left: -2px;
					top: 0;
					bottom: 0;
					z-index: 1;
					width: 5px;
					height: 5px;
					border-radius: 50%;
					background-color: #cecece;
				}

				&.address {
					font-size: 24rpx;
					color: #999999;
				}

				.time {
					font-weight: 500;
					color: #848484;
					line-height: 33rpx;
				}
			}
		}
	}
</style>